<template>
  <div class="home">
    <!-- <h1>This is an about page</h1> -->
    <!-- 接口 -->
    <!-- https://api.it120.cc/xiaochengxu -->

    <!-- 轮播图 -->
    <!-- /banner/list -->

    <!-- 首页商品列表 -->
    <!-- /shop/goods/list -->

    <!-- 商品详情 -->
    <!-- /shop/goods/datail -->
    <div class="goods_list">
      <div class="goods_item" v-for="item in list" :key="item.id">
        <img :src="item.pic" alt="" />
        <p>{{ item.name }}</p>
        <p>{{ item.minPrice }}</p>
        <button @click="add(item)">加入购物车</button>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      list: [],
    };
  },
  created() {
    this.updata();
  },
  methods: {
    updata() {
      fetch("https://api.it120.cc/xiaochengxu/shop/goods/list")
        .then((res) => res.json())
        .then((res) => {
          console.log(res);
          this.list = res.data;
        });
    },
    add(item) {
      let { id, pic, name, minPrice } = item;
      let obj = { id, pic, name, minPrice };
      this.$store.commit("add", obj);
    },
  },
};
</script>

<style scoped>
.goods_list {
  display: flex;
  flex-wrap: wrap;
  text-align: center;
}
.goods_item {
  width: 30vw;
}
.goods_item > img {
  width: 270px;
}
</style>








